<template>
  <div class="productList">
    <div class="addproduct">
      <div class="addproductTitle">添写商品信息</div>
      <div class="addproductinfo">
        <el-form
          :model="listQuery"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm">
				<el-form-item label="商品分类" prop="product_category_id">
						<el-cascader @change="setCategoryid" :props="defaultParams" v-model="listQuery.product_category_id" :options = "shopType">
				</el-cascader>
					</el-form-item>
          <el-form-item label="商品名称" prop="name">
						<el-input class="long-input" v-model="listQuery.name" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="副标题" prop="sub_title">
						<el-input class="long-input" v-model="listQuery.sub_title" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="商品品牌" prop="brand_id">
						<el-select v-model="listQuery.brand_id" placeholder="请选择">
							<el-option v-for="item in shopbrand" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品介绍" prop="description">
						<el-input class="long-input" v-model="listQuery.description" type="textarea" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="图片连接地址" prop="pic">
						<el-input class="long-input" v-model="listQuery.pic" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="商品货号" prop="product_sn">
						<el-input class="long-input" v-model="listQuery.product_sn" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="商品售价" prop="price">
						<el-input class="long-input" v-model="listQuery.price" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="市场价" prop="original_price">
						<el-input class="long-input" v-model="listQuery.original_price" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="商品库存" prop="stock">
						<el-input class="long-input" v-model="listQuery.stock" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="计量单位" prop="unit">
						<el-input class="long-input" v-model="listQuery.unit" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="商品重量" prop="weight">
						<el-input class="mid-input" v-model="listQuery.weight" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input class="long-input" v-model="listQuery.sort" placeholder="请输入内容"></el-input>
					</el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
						<el-button @click="goback()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { insertProductOneList } from "@/api/product"
import { fetchProductBrandList } from "@/api/product"
import { fetchProductCateList } from "@/api/product"

export default {
  name: "addproduct",
  data() {
    return {
      listQuery:{
        brand_id: null,
        brand_name: "",
        product_category_id: null,
        product_category_name: "",
        name: "",
        sub_title: "",
        description: "",
        pic: "",
        product_sn: "",
        price: null,
        original_price: null,
        stock: null,
        unit: "",
        weight: null,
        sort: null,
        delete_status: 0,
        verify_status: 0,
      },
      defaultParams: {
        label: "name",
        value: "id",
        children: "children",
      },
			rules:{
				name:[
					{ required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
				],
				product_category_id:[
					{required: true, message: '请选择商品分类', trigger: 'blur'}
				],
				sub_title:[
					{required: true, message: '请输入副标题', trigger: 'blur'},
					{ min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
				],
				brand_id:[
					{required: true, message: '请选中一个品牌', trigger: 'blur'}
				],
				description:[
					{required: true, message: '请输入商品介绍', trigger: 'blur'},
					{ min: 5, max: 40, message: '长度在 5 到 40个字符', trigger: 'blur' }
				],
				pic:[
					{required: true, message: '请输入图片连接地址', trigger: 'blur'},
				],
			},
			shopType:[],
			shopbrand:[],
    };
  },
  mounted() {
    this.getProductBrandData();
		this.getProductCateList();
  },
  methods: {
    submitForm: function (list) {
      this.shopType.forEach((res) => {
        if (res.id === this.listQuery.product_category_id) {
          this.listQuery.product_category_name = res.name;
        }
      });
      this.shopbrand.forEach((res) => {
        if (res.id === this.listQuery.brand_id) {
          this.listQuery.brand_name = res.name;
        }
      });
			this.$refs[list].validate((valid) => {
				if(valid){
					insertProductOneList(this.listQuery).then(res=>{
						if(res.status === 200){
							this.$message("添加成功 3秒后跳回列表页");
							setTimeout(()=>{
								this.$router.push({name:"product"})
							},3000)
						}
					})
				}
			})
    },
    setCategoryid: function (res) {
      this.listQuery.product_category_id = res[1];
      console.log(this.listQuery.product_category_id);
    },
		async getProductBrandData() {
      var res = await fetchProductBrandList();
      this.shopbrand = res.data;
    },
		async getProductCateList(){
			var res = await fetchProductCateList()
			this.shopType = res.data
		},
		goback:function(){
			this.$router.go(-1)
		}
  },
};
</script>

<style>
.addproductTitle {
  padding: 20px;
  text-align: left;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.addproductinfo{
	margin-top: 20px;
}

.el-form-item__content{
	text-align: left;
}

.long-input{
	width: 80%;
}

.mid-input{
	width: 60%;
}
</style>